<script setup lang="ts" name="home">
  import { ref, nextTick, onMounted } from "vue"
  import screenfull from "screenfull"

  const input = ref("")
  const box = ref<HTMLDivElement>()
  const toFull = () => {
    const qu = document.querySelector(".common-main-wrapper")
    console.log(qu)
    screenfull.toggle(qu as HTMLDivElement)
    // screenfull.toggle(box.value)
  }

  const dialogVisible = ref(false)
  const dialogRef = ref()
  const dialogTxt = ref("hello")
  const openDialog = () => {
    dialogVisible.value = true
    console.log(dialogRef.value)
    nextTick(() => {})
    setTimeout(() => {
      dialogTxt.value = "11111111"
    }, 200)
  }

  onMounted(() => {
    console.log("onMounted", dialogRef.value)
  })

  const value = ref("")
  const options = [
    {
      value: "Option1",
      label: "Option1"
    },
    {
      value: "Option2",
      label: "Option2"
    },
    {
      value: "Option3",
      label: "Option3"
    },
    {
      value: "Option4",
      label: "Option4"
    },
    {
      value: "Option5",
      label: "Option5"
    }
  ]
</script>

<template>
  <div>
    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
    <el-button @click="toFull" type="primary">全屏</el-button>
    <el-button @click="openDialog" type="primary">弹窗</el-button>
    <div class="box" ref="box">231</div>
    <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-dialog ref="dialogRef" v-model="dialogVisible" title="Tips" width="500">
      <span>{{ dialogTxt }}</span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
  .box {
    background-color: greenyellow;
    font-size: 30px;
    font-weight: bold;
  }
</style>
